<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*子代选择器，只能一级一级去找，不能越级寻找 */
     /*  #d1 > div > div > div{
           color:red
       }

      */

        /*后代选择器： 找到#d1 中所有的p元素，无论层级有多深 */
      /*  #d1 p{
            background: cornflowerblue;
        }
    */
        /*接续兄弟选择器:所谓的接续兄弟就是紧挨着自己的后面的兄弟，比如，我是老二，接续兄弟就是老三*/
     /*   #d_11 + div{
           color:red
       }
*/
        /*后代兄弟选择器： 后代兄弟指的是我后面所有的兄弟，包括接续兄弟 */
        #d_11~div{
            color:red
        }
    </style>

</head>
<body>
    <div id="d1">
        这是父div
        <div id="d_11">
            这是长子div
            <div id="d_11_1">
                这是长子长孙div
                <p>
                    这是曾孙div
                </p>
            </div>
            <div id="d_11_2">
                这是长子次孙div
                <div>
                    这也是曾孙
                </div>
            </div>
        </div>
        <div id="d_12">
            这是次子div
            <div id="d_12_1">
                这是次子的长子div,也是一个孙子div
            </div>
            <p>
                这也是一个孙子
            </p>
        </div>
        <p>
            这是第三个儿子
        </p>
        <div>
            这是第四个儿子
        </div>
        <p>
            这是第五个儿子
        </p>
    </div>
</body>
</html>